<template>
  <div id="app">
    <el-card>
      <div class="head">
        <div>{{$t("home.writerConsult")}}</div>
        <span @click="ConsultationBox = true">+{{$t("home.byConsulting")}}</span>
      </div>
      <div class="tool">
        <el-date-picker
          v-model="searchInfo.startTime"
          type="year"
          @change="showthechange"
          :placeholder="$t('home.selectStartDate')"
          value-format="yyyy"
        ></el-date-picker>
        <div class="control">
          <el-button @click="clear('', 2)">{{$t("home.empty")}}</el-button>
          <el-button @click="allRead">{{$t("home.allHaveBeenRead")}}</el-button>
        </div>
      </div>
      <div v-if="dataTrue" class="content">
        <div
          class="liItem"
          v-for="(item, index) in dataMessage.rows"
          :key="index"
        >
          <div class="left">
            <el-badge>
              <span v-if="item.isRead == 0" is-dot class="isRead"></span>
              <el-avatar :size="50">
                <img v-if="item.messageType ==1" :src="headerFn(item.messageType)" alt />
                <img v-else src="../../../assets/home/defhead.png" alt />
              </el-avatar>
            </el-badge>
          </div>
          <div class="right">
            <p class="title">
              <!-- 消息类型 -->
              {{ item.messageType | messageTypeFn }}
              <span class="time">{{ item.createTime }}</span>
            </p>
            <!-- //咨询类型 -->
            <P v-if="item.messageType == 1">
              <span>{{
                item.advisoryMessageType | infoType(typeOptions)
              }}</span>
            </P>
            <p class="context">{{ item.content }}</p>
            <div class="right_control" style="text-align: right">
              <span
                v-if="item.messageType == 1 || item.messageType == 2"
                style="color: #3385FD"
                @click="showDetail(item.id)"
                >{{$t("home.viewDetails")}}</span
              >
              <el-button size="small" v-else @click="Read">{{$t("home.read")}}</el-button>
              <span @click="clear(item.id, 1)">{{$t("home.delete")}}</span>
            </div>
          </div>
        </div>
        <!-- 列表翻页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="searchInfo.pageNum"
          :page-sizes="[5, 10, 20, 40]"
          :page-size="dataMessage.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="dataMessage.total"
        ></el-pagination>
      </div>
      <div v-else class="content_null">
        <div>
          <img src="@/assets/noData.png" alt />
          <img src="../../../assets/noData.png" alt />
          <p>{{$t("home.noMessage")}}</p>
        </div>
      </div>
      <!-- dialog框 --- 查看详情 -->
      <el-dialog
        class="detailBox"
        :title="$t('home.advisoryDetails')"
        :visible.sync="isDetailShow"
      >
        <div class="first">
          <div class="left">
            <el-badge>
              <el-avatar :size="50">
                <img v-if="  detailsInfo.messageType ==1 " :src="headerFn(detailsInfo.messageType)" alt />
                <img v-else src="../../../assets/home/defhead.png" alt />
              </el-avatar>
            </el-badge>
          </div>
          <div class="detailLsit">
            <div>
              <p class="title">{{ detailsInfo.messageType | messageTypeFn }}</p>
              <p class="context" v-if="detailsInfo.messageType == 1">
                {{ detailsInfo.advisoryMessageType | infoType(typeOptions) }}
              </p>
              <p class="context">{{ detailsInfo.content }}</p>
            </div>
            <div>
              <div class="time">{{ detailsInfo.createTime }}</div>
              <!-- <div class="deletDetail">
                <el-button type size="small">删除</el-button>
              </div> -->
            </div>
          </div>
        </div>
        <div class="first" v-if="  detailsInfo.messageType ==1 " style="border: none">
          <div class="left">
            <el-badge>
              <el-avatar :size="50">
                <img :src="headerFn(1)" alt />
              </el-avatar>
            </el-badge>
          </div>
          <div class="right" >
            <el-button
              style="line-height: 40px;font-size:18px; color: #3385FD; cursor: pointer"
              size="small"
              v-if="reply"
              @click="replymes"
              >{{$t("home.writeReply")}}</el-button
            >
            <div v-else style="position: relative">
              <el-form :rules="rules" :model="replyInfo">
                <el-form-item prop="content">
                  <el-input
                    type="textarea"
                    maxlength="500"
                    cols="30"
                    rows="10"
                    v-model="replyInfo.content"
                    show-word-limit
                    :placeholder="$t('home.pleaseEnterWords')"
                  />
                </el-form-item>
              </el-form>
              <!-- <p
                style="position: absolute;bottom: 5px;right: 20px;"
              >{{replyInfo.content.length}}/500</p>-->
              <div style="textalign: right; margintop: 10px">
                <el-button @click="reply = !reply">{{$t("home.cancel")}}</el-button>
                <el-button type="primary" @click="replyInfomation"
                  >{{$t("home.confirm")}}</el-button
                >
              </div>
            </div>
          </div>
        </div>
        <div class="content" >
          <div
            class="liItem"
            v-for="(item, index) in DetailMessage"
            :key="index"
          >
            <div  class="left">
              <el-badge>
                <el-avatar :size="50">
                  <img v-if="item.contentType ==1" :src="headerFn(item.contentType)" alt />
                  <img v-else src="../../../assets/home/defhead.png" alt />
                </el-avatar>
              </el-badge>
            </div>
            <div class="right">
              <p class="title">
                {{ item.contentType | replyType }}
                <span class="time">{{ item.replyTime }}</span>
              </p>
              <p class="context"></p>
              <p class="context">{{ item.replyContent }}</p>
            </div>
          </div>
        </div>
        <!-- 查看详情 -->
        <el-pagination
          @size-change="detailsSizeChange"
          @current-change="detailsCurrentChange"
          :current-page="detailsPageInfo.pageNum"
          :page-sizes="[5, 10, 20, 40]"
          :page-size="detailsPageInfo.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="detailsPageInfo.total"
        ></el-pagination>
      </el-dialog>
    </el-card>
    <!-- 添加咨询 -->
    <el-dialog @opened="resetData" :title="$t('home.byConsulting')" :visible.sync="ConsultationBox">
      <el-form ref="form" :model="form" :rules="rules" label-width="90px">
        <el-form-item :label="$t('home.messageType')">
          <el-select v-model="form.advisoryType">
            <template v-for="(item, index) in typeOptions">
              <el-option
                :key="index"
                :value="item.id"
                :label="item.messageTitle"
              />
            </template>
          </el-select>
        </el-form-item>

        <el-form-item :label="$t('home.detailedDescription')" prop="content">
          <el-input
            type="textarea"
            :placeholder="$t('home.pleaseEnterWords')"
            v-model="form.content"
            cols="30"
            maxlength="500"
            rows="10"
          ></el-input>
          <p style="position: absolute; bottom: 5px; right: 20px">
            {{ form.content.length }}/500
          </p>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="ConsultationBox = false">{{$t("home.cancel")}}</el-button>
        <el-button type="primary" @click="submitConsultation()"
          >{{$t("home.releaseConsulting")}}</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>


<script>

import {
  addAdvisory,
  selectAdvisoryPage,
  messageType,
  deleteAdvisory,
  selectAdvisory,
  selectAdvisoryReplyPage,
  addAuthorAdvisoryReply,
  updateMessageIsRead,
} from "@/api/authorCenter/writerConsultation";
let app;
let that
export default {
  data() {
    return {
      headerImg: "", //头像
      currentPage: 1,
      replyInfo: {
        id: "",
        content: "",
      },
      saveInfo: {},
      reply: true,
      value: "",
      searchInfo: {
        startTime: "",
        endTime: "",
        pageSize: 10,
        pageNum: 1,
        total: 0,
      },
      //   详情数据
      detailsPageInfo: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      total: null,
      typeOptions: [],
      ConsultationBox: false,
      Consultation: {
        type: "",
        content: "",
      },
      isDetailShow: false,
      activeName: "first",
      form: {
        advisoryType: "",
        content: "",
      },
      DetailMessage: [],
      dataMessage: [],
      dataTrue: true,
      logotext: this.$t('home.latestInformation'),
      detailsInfo: {},
      rules: {
        content: [
          { required: true, message: this.$t('home.pleaseEnterWords'), trigger: "blur" },
          {
            min: 10,
            max: 500,
            message: this.$t('home.pleaseEnterWords'),
            trigger: "blur",
          },
        ],
      },
    };
  },
  beforeCreate() {
    that = this;
  },
  filters: {
    messageTypeFn(res) {
      //消息类型
      switch (res) {
        case 1:
          return that.$t('home.authorConsulting');
        case 2:
          return that.$t('home.coordinatingEditorMessage');
        case 3:
          return that.$t('home.systemMessages');
      }
    },
    infoType(value, type) {
      let name = "";
      type.map((item) => {
        if (item.id === value) {
          name = item.messageTitle;
        }
      });
      return name;
    },
    replyType(value) {
      if (value === 1) {
        return that.$t('home.authorsReply');
      } else if (value === 2) {
        return that.$t('home.coordinatingEditorReply');
      }
    },
  },
  methods: {
    resetData(){
      this.form.advisoryType =''
      this.form.content =''
    },
    headerFn(item) {
      //不同身份头像
      let that = this;
      switch (item) {
        case 1:
          return  this.$store.state.userInfo.coverUrl;
          break 
        case 2:
          return "../../../assets/home/defhead.png";
          break
        case 3:
          return "../../../assets/home/defhead.png";
          break
      }
    },
    // 事件筛选
    showthechange(res) {
      this.searchInfo.startTime = res;
      this.selectAdvisoryPageFn();
    },
    // 列表翻页
    handleSizeChange(val) {
      this.searchInfo.pageSize = val;
      this.selectAdvisoryPageFn();
    },
    handleCurrentChange(val) {
      this.searchInfo.pageNum = val;
      this.selectAdvisoryPageFn();
    },
    //详情翻页
    detailsSizeChange(val) {
      //当前也数据条数改变
      this.detailsPageInfo.pageSize = val;
      this.getDetailsList(this.detailsInfo.id);

      // this.getDetailsList(this.detailsInfo.id);
    },
    detailsCurrentChange(val) {
      //当前页改变
      console.log(val);
      this.detailsPageInfo.pageNum = val;
      this.getDetailsList(this.detailsInfo.id);
    },
    Read(rev) {
      // 点击触发已读方法改变信息阅读状态
      // alert("id" + rev + "这条信息已读");
    },
    replymes() {
      // 点击写回复，更改进入编写状态
      this.reply = false;
      // alert('coc')
    },
    submitConsultation() {
      // this.$refs["chapterTitle"].validate((valid)
      this.$refs["form"].validate((valid) => {
        if (valid) {
          let params = {
            advisoryType: this.form.advisoryType,
            content: this.form.content,
          };
          addAdvisory(params).then((res) => {
            if (res.code == 1) {
              this.ConsultationBox = false;
              this.$message({
                type: "success",
                message: "发起成功",
              });
              this.selectAdvisoryPageFn();
            }
          });
        }
      });
    },
    clear(id, type) {
      // 清空作者咨询全部内容
      this.$confirm(this.$t('home.clearingMessage'), this.$t('home.tips'), {
        confirmButtonText: this.$t('home.confirm'),
        cancelButtonText: this.$t('home.cancel'),
        type: "",
      })
        .then(() => {
          let params = {};
          if (type == 1) {
            //删除单个
            params = {
              advisoryId: id,
              operateType: type,
            };
          } else {
            params = {
              advisoryId: "",
              operateType: type,
            };
          }
          deleteAdvisory(params).then((res) => {
            console.log(res);
            if (res.code == 1) {
              this.$message({
                type: "success",
                message: this.$t('home.emptySuccess'),
              });
              this.selectAdvisoryPageFn();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: this.$t('home.cancelledOperation'),
          });
        });
    },
    allreaded(data){
       updateMessageIsRead(data).then(res=>{
         this.selectAdvisoryPageFn()
      })
    },
    allRead() {
      // 点击全部已读功能
    this.allreaded({operateType: 2})
    },
    showDetail(id) {
      this.allreaded({operateType: 1,advisoryId:id})
      // 查看详情
      this.isDetailShow = true;
      // this.saveInfo = this.dataMessage[rev];
      // this.detailsInfo
      let params = { advisoryId: id };
      selectAdvisory(params).then((res) => {
        console.log(res);
        this.detailsInfo = res.source;
      });
      this.getDetailsList(id); //获取详情回复列表
    },
    getInfo() {
      // 获取该页面全部消息展示信息
    },
    //获取详情列表
    getDetailsList(rev) {
      let params = {
        advisoryId: rev,
        pageNum: this.detailsPageInfo.pageNum,
        pageSize: this.detailsPageInfo.pageSize,
      };
      selectAdvisoryReplyPage(params).then((res) => {
        this.detailsPageInfo.pageNum = res.source.current;
        this.detailsPageInfo.pageSize = res.source.size;
        this.detailsPageInfo.total = res.source.total;
        this.DetailMessage = res.source.rows;
      });
    },
    getMsgTypeInfo() {
      //获取消息类型
      messageType().then((res) => {
        this.typeOptions = res.source;
        sessionStorage.setItem("typeOptions", JSON.stringify(res.source));
      });
    },
    //资讯详情页回复功能
    replyInfomation() {
      let params = {
        advisoryId: this.detailsInfo.id,
        replyContent: this.replyInfo.content,
      };
      addAuthorAdvisoryReply(params).then((res) => {
        if (res.code == 1) {
          this.replyInfo.content = "";
          this.reply = !this.reply;
          this.$message({
            message: this.$t('home.commentSuccess'),
            type: "success",
          });
          this.showDetail(this.detailsInfo.id);
        }
        console.log(res);
      });
    },
    //获取资讯列表
    selectAdvisoryPageFn() {
      let data = new Date();
      let year = data.getFullYear().toString();
      if (this.searchInfo.startTime == "") {
        this.searchInfo.startTime = year;
      }
      let params = {
        endTime: this.searchInfo.startTime + "-12-31",
        pageNum: this.searchInfo.pageNum,
        pageSize: this.searchInfo.pageSize,
        startTime: this.searchInfo.startTime + "-1-1",
      };
      selectAdvisoryPage(params).then((res) => {
        this.dataMessage = res.source;
        this.dataTrue = res.source.rows.length;
      });
    },
  },
  created() {
  },
  mounted() {
    this.selectAdvisoryPageFn();
    this.getMsgTypeInfo();
  },
};
</script>


<style lang="scss" scoped="scoped">
.el-pagination {
  text-align: right;
  margin-top: 30px;
}
.isRead {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #cd001a;
  position: absolute;
  top: 18px;
  left: -5px;
}
span {
  cursor: pointer;
}

#app {
  // background: #ccc;
  min-height: 665px;
  // padding: 20px;

  .head {
    // font-size: 24px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 33px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid #ccc;

    span {
      font-size: 10px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      // color: #999999;
    }
  }

  .tool {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 20px;

    .control {
      line-height: 100%;

      span {
        display: inline-block;
        margin: 10px 0;
        margin-left: 50px;
      }
    }
  }
  .deletDetail {
    text-align: right;
  }
  .detailLsit {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }
  .content {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    .liItem {
      box-sizing: border-box;
      // height: 100px;
      display: flex;
      flex-direction: row;
      padding: 10px 0;
      border-bottom: 1px solid #ccc;

      .left {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        width: auto;
        width: 80px;
        text-align: center;
        margin-right: 10px;
        justify-content: center;
      }

      .right {
        flex: 1;
        display: flex;
        flex-direction: column;
        p {
          line-height: 30px;
        }
        .right_control {
          text-align: right;

          span {
            margin-left: 40px;
            font-size: 16px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #ccc;
          }
          span:hover {
            color: red;
          }
        }

        .title {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          font-size: 16px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #333333;

          // line-height: 14px;
          .tip {
            border-radius: 2px;
            border: 1px solid #cd001a;
            font-size: 8px;
            padding: 1px 5px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #cd001a;
          }
        }

        .context {
          font-size: 10px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #666666;
          line-height: 12px;
          flex: 1;
        }

        .time {
          font-size: 8px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #cccccc;
        }
      }
    }
  }

  .content_null {
    text-align: center;

    padding: 100px 0;
  }

  .detailBox {
    .first {
      box-sizing: border-box;
      // height: 100px;
      display: flex;
      flex-direction: row;
      padding: 10px 0;
      border-bottom: 1px solid #ccc;

      .left {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        width: auto;
        width: 80px;
        text-align: center;
        margin-right: 10px;
        justify-content: center;
      }

      .right {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;

        .right_control {
          text-align: right;

          span {
            margin-left: 40px;
            font-size: 16px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #3385FD;
          }
        }

        .title {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          font-size: 16px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #333333;

          // line-height: 14px;
          .tip {
            border-radius: 2px;
            border: 1px solid #cd001a;
            font-size: 8px;
            padding: 1px 5px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #cd001a;
          }
        }

        .context {
          font-size: 10px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #666666;
          line-height: 12px;
          flex: 1;
        }

        .time {
          font-size: 8px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #cccccc;
        }
      }
    }

    .liItem {
      box-sizing: border-box;
      height: 100px;
      display: flex;
      flex-direction: row;
      padding: 10px 0;
      border: none;

      .left {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        width: auto;
        width: 80px;
        text-align: center;
        margin-right: 10px;
        justify-content: center;
      }

      .right {
        flex: 1;
        display: flex;
        flex-direction: column;

        .right_control {
          text-align: right;

          span {
            margin-left: 40px;
            font-size: 16px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #21d4cf;
          }
        }

        .title {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          font-size: 16px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #333333;

          // line-height: 14px;
          .tip {
            border-radius: 2px;
            border: 1px solid #cd001a;
            font-size: 8px;
            padding: 1px 5px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #cd001a;
          }
        }

        .context {
          font-size: 10px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #666666;
          line-height: 12px;
          flex: 1;
        }

        .time {
          font-size: 8px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #cccccc;
        }
      }
    }
  }
}
</style>
